<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="流水线列表" name="first" class="demo-tabs">
      <div>
        <el-button type="success" @click="ToCreate('')">创建</el-button>
        <el-input v-show="sinput" v-model="search" :suffix-icon="Search" class="table_search" placeholder="搜索"/>
      </div>
      <Table v-model:data="tableData" @submit="ToCreate">
        <el-table-column prop="name" label="流水线名" width="180" sortable>
          <template #default="scope">
            <span class="pipename" @click="PipeDetail(scope.row)">
              {{ scope.row.name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="ctime" label="创建时间" width="180"/>
        <el-table-column prop="Owner.username" label="创建人"/>
        <el-table-column prop="product" label="产品"/>
        <el-table-column prop="version" label="当前版本"/>
        <el-table-column prop="spec" label="定时任务"/>
        <el-table-column prop="switch" label="开关">
          <template #default="scope">
            <el-switch :model-value="scope.row.switch" @change="Switch(scope.row)" :loading="scope.row.loading">
            </el-switch>
          </template>

        </el-table-column>
        <el-table-column prop="status" label="状态"/>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button link plain @click="RunPipeline(scope.row.name)" type="success">运行</el-button>
            <el-button link plain @click="ToCreate(scope.row.name)" type="success">编辑</el-button>
            <el-button link plain @click="OpenCopy" type="warning">复制</el-button>
            <el-button link plain @click="DeletePipeline(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </Table>

      <Pagination @change="ListPipe" v-model:page="page"/>
    </el-tab-pane>

    <el-tab-pane label="历史流水线" name="history">
      <HisPipe/>
    </el-tab-pane>

  </el-tabs>

  <el-dialog lock-scroll destroy-on-close :before-close="handleClose" v-model="CopyDialog" title="复制流水线" width="25%">
    <keep-alive>
      <el-form>
        <el-form-item label="新流水线名称">
          <el-input v-model="new_name" />
        </el-form-item>

      </el-form>
    </keep-alive>
    <template #footer>
      <el-button type="success" @click="CopyPipe">确认</el-button>
    </template>
  </el-dialog>


</template>

<script  setup>
import {Search} from '@element-plus/icons-vue'
import { ElMessageBox} from 'element-plus'
import Pagination from '@/components/common/Pagination.vue'
import Table from '@/components/common/Table.vue'
import {onMounted, reactive, ref} from 'vue'
import {useRouter} from "vue-router";
import {MSuccess} from "@/api/base";
import {pipeline} from './js/pipeline'
import HisPipe from './his_pipeline.vue'
import {task} from "@/view/dashboard/cicd/js/task";
const search = ref('')
const router = useRouter()
const activeName = ref('first')
let page = reactive({"page":1,"size":15,"total":300})
const tableData = ref([])

var dialogVisible = ref(false)
const CopyDialog = ref(false)
const handleClose = ()=>{
  CopyDialog.value = false
  dialogVisible.value = false
}
const old_name = ref('')
const new_name = ref('')
const copy_tile = ref("")

onMounted(() => {
  ListPipe()
})

const OpenCopy =  (name)=> {
  old_name.value = name
  copy_tile.value = "复制流水线：" + name
  CopyDialog.value = true
}

const CopyPipe = async ()=>{
  await pipeline.Copy({"name":old_name.value,"new_name":new_name.value})
  ListPipe()
  CopyDialog.value = false
}

const ListPipe = async () => {
  var res = await pipeline.List(page)
  tableData.value = res.data
  page.total = res.total
}
const RunPipeline = async (name) =>{
  await pipeline.Run(name)
}
const PipeDetail = (row) => {
  router.push({"name": "流水线详情", query: {pipename: row.name}})
}

const ToCreate = (name) => {
  if (name == "" || name == undefined || name == null) {
    router.push({"name": "流水线创建(修改)"})
    return
  }
  router.push({"name": "流水线创建(修改)", query: {pipename: name}})
}

const Switch =  (row) => {
  row.loading = true
  var s = false
  if (row.switch == false) {
    var str = "开启定时任务"
    s = true
  }else{
    var str = "关闭定时任务"
    s = false
  }
  ElMessageBox.confirm("确认要执行此操作吗？", str).then( () => {
    pipeline.Switch({"name":row.name,"switch":s})
        .then(async (response) => {
          MSuccess(response)
          row.loading  = false
          await ListPipe()
        })
  })
}

const DeletePipeline = async (row) =>{
  await ElMessageBox.confirm("确认要删除此流水线吗？", row.name).then( () => {
    pipeline.Delete(row.id)
  })
}

</script>

<style scoped lang="scss">
@import "@/styles/table_header.scss";

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.operator {
  padding-top: 8px;
}

.el-input {
  float: right;
  width: 200px;
}

.el-pagination {
  float: right;
}

.operation .el-button {
  border: 0;
  padding: 0;
  margin: 0;
  width: 50px
}


.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs__item:hover {
  color: red;
}

.pipename {
  font-family: 微软雅黑;
}

.pipename:hover {
  color: green;
  cursor: pointer;
  text-decoration: underline;
}
</style>
